<template>
    <!-- <NowLoading :mycolor="'transparent'" v-if="isMounted"/> -->
  <div>
    <!-- <div v-if="loading">
    </div> -->
     <NowLoading :mycolor="'transparent'" v-if="loading"/>
    <div class="question" v-else>
      <div class="top">
        <van-search background="#f9f9f9"  v-model="mySearch"  
        @search="onSearch"
        class="search" placeholder="试试搜索你的问题" />
        <ul class="question-tab">
          <li class="tab-item" v-for="(item, index) in tag" :class="{ active: active === index }"
            @click="changeActive(index, item.tag_id)">
            <span>{{ item.tag_id }}</span> <span v-if="item.num">{{ item.num }}</span>
          </li>
        </ul>

      </div>
      <div class="question-content">


        <div class="question-item" v-for="i in mizoneQ.question_list" :key="i.q_id">
          <div class="question-title">{{ i.question }}</div>
          <div class="arter-detail">
            <van-image width="1.1rem" height="1.1rem" :src="i.icon" round />
            <div class="arter">
              <span class="arter-img">{{ i.nickname }} </span>
              <span class="arter-time">{{ i.create_time }}</span>
              <span class="arter-time">{{ i.belong_place }}</span>
            </div>
          </div>
          <div class="answer-list" v-for="q in i.answer_list_v2" :key="q.icon">
            <div class="icon">
              <van-image width="1.1rem" height="1.1rem" :src="q.icon" round />
            </div>
            <div class="answer-commt">
              {{ q.answer }}
            </div>
          </div>
          <div class="more-answer">
            全部<span>{{ i.answer_num }}</span>条评论<van-icon name="arrow" />
          </div>
        </div>





        

      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import NowLoading from '../../../../components/NowLoading.vue'
import { MiQuestionDetail ,questionSearch} from '../../../../typings'
import { getMizoneQuestionList,getMizoneQuestionSearch } from '../../../../api/find'
import { onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router';
const route = useRoute();
let loading = ref(true);
let firstTag = ref(true);
const  mySearch = ref<string>('');
let tag = reactive<Array<{
  tag_id: string,
  num?: string,
}>>([])
let r = Number(route.query.id);
let mizoneQ = ref<MiQuestionDetail>();
let Search = reactive<Array<questionSearch>>([]);
onMounted(() => {
  getData(r,'综合');
})
const getData = async (id: number, t?: string) => {
  let resQ = await getMizoneQuestionList(id, t);
  mizoneQ.value = resQ.data;
  if (firstTag.value) {
    tag = mizoneQ.value.tag_list;
    if (tag.length > 10) {
      tag = tag.slice(0,10)
    }
    firstTag.value = false;
  }
  loading.value = false;
}
const getSearch =  async( id: number, q:string) => {
  let resSearch = await getMizoneQuestionSearch(id,q);
  Search = resSearch.data.question_list; 
  loading.value = false;
}
let active = ref(0);
const changeActive = (index: number, tagName: string) => {

  active.value = index;
  loading.value = true;
  getData(r, tagName);
  // if (index === 0) {
  //   getData(r);
  //   nextTick(() => {
  //     console.log('next');

  //     loading.value = false;
  //   })
  // } else {
  //   getData(r, tagName);
  //   nextTick(() => {
  //     loading.value = false;
  //   })

  // }
}
const onSearch = () => {
  loading.value = true;
  getData(r, mySearch.value);
  console.log("搜索了", mySearch.value);
  // loading.value = false;
  
}
</script>

<style lang="scss" scoped>
.question {

  background-color: #f9f9f9;

  .top {
    padding: 1rem 1rem 0rem;
    background-color: #f9f9f9;

    .search {
      padding: 0;

      :deep(.van-search__content) {
        margin-bottom: 1rem;
        background-color: #f0f0f0;
        border-radius: 9999rem;
      }
    }

 
  }
  .question-tab {
      display: flex;
      flex-wrap: wrap;

      .tab-item {
        background-color: #fff;
        padding: .4rem .8rem;
        margin: 0rem .5rem .5rem 0rem;
        font-size: .8rem;
        border-radius: 9999rem;
        font-weight: bold;
      }
      .tab-item.active {
        background-color: #ff5934;
        color: #fff;
      }
    }
}

.question-content {
  background-color: #f6f6f6;

  // padding: 1rem;
  .question-item {
    background-color: #fff;
    padding: 1.5rem 1rem;
    margin-bottom: .5rem;

    .question-title {
      font-weight: bold;
      font-size: .9rem;
    }

    .arter-detail {
      color: rgba(0, 0, 0, .4);
      font-size: .8rem;
      display: flex;
      align-items: center;
      padding: .8rem 0rem .8rem;
      border-bottom: .04rem dashed rgba(0, 0, 0, .2);

      .arter {
        margin-left: .5rem;

        span {
          margin-left: .5rem;
        }
      }
    }

    .answer-list {
      padding-top: .6rem;
      display: flex;
      font-size: .8rem;

      .answer-commt {
        margin-left: .5rem;
      }
    }

    .more-answer {
      margin-top: .6rem;
      color: rgba(0, 0, 0, .4);
      font-size: .8rem;

    }
  }
}
</style>